বুটস্ট্রাপ৩ গ্রিড সিস্টেম (Bootstrap3 Grid System)

Bootstrap 3 Grid System একটি শক্তিশালী এবং নমনীয় সিস্টেম যা ওয়েব পেজ ডিজাইন করার সময় লেআউটকে বিভিন্ন স্ক্রীন সাইজ অনুযায়ী অটোমেটিকভাবে রেসপন্সিভ (responsive) করতে সাহায্য করে। এটি 12-column grid system ব্যবহার করে যেখানে আপনি সহজেই কনটেন্টের বিভিন্ন সাইজ এবং ডিভাইসের স্ক্রীন সাইজ অনুযায়ী উপাদানগুলি সাজাতে পারেন।

Bootstrap 3 Grid System এর মূল ধারণা

Bootstrap 3 এ grid system তৈরি হয় 12 columns দিয়ে। এটি ডিভাইসের স্ক্রীন সাইজ অনুযায়ী কনটেন্টের সাইজ এবং লেআউট কন্ট্রোল করতে সাহায্য করে। এর মাধ্যমে আপনি বিভিন্ন সাইজের স্ক্রীনের জন্য উপযুক্ত কনটেন্ট উপস্থাপন করতে পারেন (যেমন: মোবাইল, ট্যাবলেট, ডেস্কটপ)।

Grid System এর কনসেপ্ট:

1. Container:
   • একটি ওয়েব পেজের জন্য গ্রিড ব্যবহারের আগে, আপনাকে একটি container ব্যবহার করতে হবে, যা ওয়েব পেজের কনটেন্টকে কেন্দ্র করে রাখে।
   • দুই ধরনের কন্টেইনার আছে:
     • .container: ফিক্সড-width কন্টেইনার।
     • .container-fluid: পুরো স্ক্রীন বিস্তৃত কন্টেইনার (100% width)।
2. Row:
   • কন্টেইনারের মধ্যে উপাদানগুলো সাজানোর জন্য row ব্যবহার করতে হবে।
   • রো একটি horizontal group হিসাবে কাজ করে, যাতে আপনি একাধিক কলাম রাখতে পারেন।
3. Columns:
   • col- ক্লাস ব্যবহার করে কলাম তৈরি করা হয়। এই কলামগুলি কন্টেইনারের মধ্যে সেগমেন্ট হিসাবে কাজ করে।
   • গ্রিড সিস্টেমে মোট 12 কলাম থাকে, তাই আপনি যেকোনো সংখ্যক কলাম দিয়ে পেজের কনটেন্ট ভাগ করতে পারেন, কিন্তু যোগফল সর্বদা 12 এর সমান হতে হবে।

Bootstrap 3 Grid System Syntax:

<div class="container">
  <div class="row">
    <div class="col-xs-4">Column 1</div>
    <div class="col-xs-4">Column 2</div>
    <div class="col-xs-4">Column 3</div>
  </div>
</div>

এখানে, আমরা একটি কন্টেইনার তৈরি করেছি, তার মধ্যে একটি রো (row) এবং তিনটি কলাম (col-xs-4) রেখেছি। যেহেতু আমরা 12 কলাম ব্যবহার করতে পারি, প্রতি কলামে 4টি কলাম যুক্ত করলে 12 হবে (4+4+4=12)।

Bootstrap Grid System এর Breakpoints:

Bootstrap 3 এর গ্রিড সিস্টেম responsive ডিজাইন সাপোর্ট করে, অর্থাৎ আপনার ওয়েব পেজের লেআউট বিভিন্ন ডিভাইসের স্ক্রীন সাইজ অনুযায়ী পরিবর্তিত হবে। Bootstrap 3 এ 4টি মূল ব্রেকপয়েন্ট বা স্ক্রীন সাইজ রয়েছে:

1. Extra Small Devices (col-xs-*): মোবাইল ফোন বা ছোট ডিভাইসের জন্য (screen width < 768px)।
2. Small Devices (col-sm-*): ট্যাবলেট বা ছোট স্ক্রীনের জন্য (screen width >= 768px)।
3. Medium Devices (col-md-*): ডেস্কটপ স্ক্রীনের জন্য (screen width >= 992px)।
4. Large Devices (col-lg-*): বড় ডেস্কটপ স্ক্রীনের জন্য (screen width >= 1200px)।

Breakpoints Example:

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Column 1</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Column 2</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Column 3</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Column 4</div>
  </div>
</div>

এখানে:

• col-xs-6: ছোট স্ক্রীন (mobiles) এর জন্য প্রতিটি কলাম 6 কলাম জায়গা নেবে (অর্থাৎ, দুইটি কলাম প্রতি রো তে থাকবে)।
• col-sm-4: বড় স্ক্রীন (tablets) এর জন্য প্রতিটি কলাম 4 কলাম জায়গা নেবে (অর্থাৎ, তিনটি কলাম প্রতি রো তে থাকবে)।
• col-md-3: মিডিয়াম স্ক্রীন (desktops) এর জন্য প্রতি কলাম 3 কলাম জায়গা নেবে (অর্থাৎ, চারটি কলাম থাকবে)।
• col-lg-2: বড় ডেস্কটপ স্ক্রীন (large desktops) এর জন্য প্রতি কলাম 2 কলাম জায়গা নেবে (অর্থাৎ, ছয়টি কলাম থাকবে)।

Column Sizing:

Bootstrap 3 এর গ্রিড সিস্টেমে বিভিন্ন কলামের সাইজ নির্ধারণ করা যেতে পারে। এটি অবশ্যই 12 কলামের মধ্যে ভাগ করা হবে।

Column Sizing Example:

<div class="container">
  <div class="row">
    <div class="col-md-3">Column 1</div>
    <div class="col-md-6">Column 2</div>
    <div class="col-md-3">Column 3</div>
  </div>
</div>

এখানে, আমরা তিনটি কলাম ব্যবহার করেছি:

• প্রথম কলাম 3/12 (25%) জায়গা নেবে।
• দ্বিতীয় কলাম 6/12 (50%) জায়গা নেবে।
• তৃতীয় কলাম 3/12 (25%) জায়গা নেবে।

এভাবে কলামগুলির সাইজ প্রদান করা সম্ভব।

Offsets:

যদি আপনি কলামগুলিকে কিছুটা সরে রাখতে চান, তবে offsets ব্যবহার করতে পারেন। এটি একটি কলামের শুরুতে নির্দিষ্ট পরিমাণের ফাঁকা স্থান তৈরি করবে।

Offset Example:

<div class="container">
  <div class="row">
    <div class="col-md-3 col-md-offset-3">Column 1</div>
    <div class="col-md-3">Column 2</div>
  </div>
</div>

এখানে:

• প্রথম কলামটি 3 কলাম জায়গা নেবে এবং তারপর 3 কলাম ফাঁকা (offset) থাকবে।
• দ্বিতীয় কলামটি 3 কলাম জায়গা নেবে এবং তার পাশের কলামের সাথে আছ।

Nesting Columns (Column Nesting):

একটি কলামের মধ্যে অন্য কলাম রাখাও সম্ভব, যার মাধ্যমে আরো জটিল এবং নমনীয় লেআউট তৈরি করা যায়।

Column Nesting Example:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      Column 1
      <div class="row">
        <div class="col-md-6">Nested Column 1</div>
        <div class="col-md-6">Nested Column 2</div>
      </div>
    </div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

এখানে, প্রথম কলামে দুটি নেস্টেড কলাম রয়েছে, যা অন্তর্ভুক্ত হচ্ছে।

Bootstrap 3 এর grid system সহজ এবং কার্যকরীভাবে ওয়েব পেজ ডিজাইন এবং লেআউট তৈরি করার জন্য একটি অত্যন্ত শক্তিশালী টুল। এর 12-column গ্রিড সিস্টেম ব্যবহার করে আপনি যেকোনো স্ক্রীন সাইজের জন্য responsive ওয়েব পেজ তৈরি করতে পারেন। গ্রিড সিস্টেমের মূল ধারণা, ব্রেকপয়েন্ট, কলাম সাইজিং, এবং অফসেটের মাধ্যমে আপনার ওয়েবসাইটের লেআউট কাস্টমাইজ করতে পারবেন, যা বিভিন্ন ডিভাইসে সঠিকভাবে প্রদর্শিত হবে।

বুটস্ট্রাপ গ্রীড সিস্টেম

বুটস্ট্রাপ গ্রীড সিস্টেমের মাধ্যমে একটি পেজকে ১২টি কলাম পর্যন্ত ভাগ করা যায়।

আপনার যদি ১২ কলাম একসাথে প্রয়োজন না হয়, তাহলে আপনি চাইলে বেশি প্রশস্থের বিভিন্ন কম্বিনেশনে কলাম গ্রুপ তৈরি করে নিতে পারেনঃ

বুটস্ট্রাপের গ্রীড সিস্টেম রেসপন্সিভ এবং স্ক্রিনের আকারের উপর নির্ভর করে কলামগুলো বিন্যাসিত হয়: বড় স্ক্রিনে হয়তো একটি কন্টেন্ট ৩ কলামে পাশাপাশি দেখতে ভাল লাগে, কিন্তু ঐ কন্টেন্টই ছোট স্ক্রিনে নিচে নিচে দেখালে দেখতে ভাল লাগবে।

গ্রীড ক্লাসসমূহ

বুটস্ট্রাপ গ্রীড সংক্রান্ত চারটি ক্লাস রয়েছেঃ

1. xs (ফোনের জন্য)
2. sm (ট্যাবলেটের জন্য)
3. md (ডেস্কটপের জন্য)
4. lg (বড় আকারের ডেস্কটপের জন্য)

অধিক ডায়নামিক এবং ফ্লেক্সিবল লে-আউট তৈরি করার জন্য উপরের ক্লাস গুলো একত্রে বিভিন্ন কম্বিনেশনে ব্যবহার করা যায়।

টিপসঃ আপনি যদি xs, sm এবং md আকারের ডিভাইসের জন্য একই লে-আউট নির্ধারন করতে চান, তাহলে শুধুমাত্র xs এর জন্য লে-আউট নির্ধারণ করলেই সকল স্ক্রিনে একই রকম দেখাবে।

গ্রীড সিস্টেম রুলস

বুটস্ট্রাপ গ্রীড সিস্টেমের কিছু রুলসঃ

1. যথাযথ এ্যালাইনমেন্ট এবং প্যাডিংয়ের জন্য .row কে অবশ্যই .container (fixed-width) অথবা .container-fluid (full-width) এর মধ্যে রাখতে হবে।
2. আনুভূমিক গ্রুপ কলাম তৈরি করার জন্য সারি ব্যবহার করুন।
3. কন্টেন্টগুলো কলামের মধ্যে এবং কলামগুলো সারির পরপরই রাখতে হবে।
4. পূর্ব-নির্ধারিত ক্লাস যেমন; .row এবং .col-sm-4 মাধ্যমে সহজে এবং দ্রুততার সহিত গ্রীড লে-আউট তৈরি করা যায়।
5. কলামগুলো প্যাডিংয়ের মাধ্যমে গাটার (কলাম কন্টেন্টের মধ্যে ফাকাস্থান) তৈরি করে। একটি .rows এর প্রথম এবং শেষ কলামে নেগেটিভ মার্জিন ব্যবহৃত হয়।
6. গ্রীড কলাম ১২ টি কলামের মাধ্যমে তৈরি করা হয়েছে। উদাহরণস্বরুপ, যদি সমান তিনটি কলাম চান তাহলে .col-sm-4 ক্লাস ব্যবহার করতে হবে।

একটি বুটস্ট্রাপ গ্রীডের বেসিক গঠন

নিচে বুটস্ট্রাপ গ্রীডের একটি বেসিক গঠন দেখানো হলোঃ

kt_satt_skill_example_id=1210

তাহলে, আপনি যে লে-আউট চান সেটি তৈরি করার জন্য প্রথমে একটি কন্টেইনার তৈরি করুন (< div class="container" >)। তারপর, একটি সারি(row) তৈরি করুন (< div class="row" >)। তারপর প্রয়োজন অনুযায়ী কলামের সংখ্যা যুক্ত করুন। ( .col-*-* ক্লাসের সাহায্য)। মনে রাখবেন প্রতি সারিতে সর্বোচ্চ ১২টি কলাম যুক্ত করতে পারবেন।

গ্রীড অপশন

নিম্নলিখিত টেবিলে দেখানো হলো কিভাবে বিভিন্ন ডিভাইসে বুটস্ট্রাপ গ্রীড সিস্টেম কাজ করেঃ

উদাহরণ

পরবর্তী অধ্যায়গুলোতে বিভিন্ন ডিভাইসের জন্য গ্রীড সিস্টেমের উদাহরণ দেয়া হয়েছে:

1. Stacked-to-Horizontal
2. ছোট ডিভাইস
3. মিডিয়াম ডিভাইস
4. বড় ডিভাইস

বুটস্ট্রাপ গ্রীড উদাহরণ: Stacked-to-horizontal

বুটস্ট্রাপ গ্রীডঃ এখানে আমরা একটি বেসিক গ্রীড লে-আউট তৈরি করবো যেটি মোবাইল এবং ট্যাবলেটের ক্ষেত্রে কলামগুলো নিচে নিচে দেখাবে এবং ডেস্কটপের ক্ষেত্রে (মিডিয়াম/বড় ডিভাইস) এটি আনুভূমিক(horizontal) বা পাশাপাশি দেখাবে ভাবে দেখাবে।

নিচের উদাহরণে একটি সরল "stacked-to-horizontal" উদাহরণ দেখানো হলো। যেটি দুই কলাম বিশিষ্ট একটি সাধারণ লে-আউট। এই উদাহরণের দুটি কলাম একদম ছোট স্ক্রিন ব্যতিত অন্য সকল স্ক্রিনেই ৩৩.৩%/৬৬.৬% আনুভূমিক লে-আউটে প্রদর্শিত হবে। অর্থাৎ একদম ছোট স্ক্রিনে প্রত্যেকটি কলাম ১০০% জায়গা নিয়েই প্রদর্শিত হবেঃ

kt_satt_skill_example_id=1213

টিপসঃ এছাড়াও আপনার প্রয়োজন মতো .container এর পরিবর্তে .container-fluid ক্লাসও ব্যবহার করতে পারেনঃ

kt_satt_skill_example_id=1215

বুটস্ট্রাপ গ্রীড উদাহরণ: ছোট ডিভাইস

মনে করুন, আমাদের কাছে দুটি কলাম যুক্ত একটি সাধারণ লে-আউট রয়েছে। এবং আমরা চাই যে লে-আউটটি ছোট ডিভাইসের ক্ষেত্রে দুটি কলামের জন্য যথাক্রমে ৫০% এবং ৫০% অনুপাতে ভাগ হবে।

টিপসঃ ছোট ডিভাইস বলতে ৭৬৮ পিক্সেল থেকে ৯৯২ পিক্সেল রেজুলেশনের স্ক্রিনযুক্ত ডিভাইসকে(মূলত ট্যাবলেট) বুঝায়।

ছোট ডিভাইসের জন্য আমরা .col-sm-* ক্লাস ব্যবহার করবো।

উপরে যে দুটি কলামের কথা বলা হয়েছে তার জন্য আমরা নিম্নলিখিত ক্লাসগুলো ব্যবহার করিঃ

kt_satt_skill_example_id=1219

এই উদাহরণটি ছোট (এবং মিডিয়াম এবং বড়) স্ক্রিনের জন্য ৫০% এবং ৫০% অনুপাতে দুটি কলাম তৈরি করবে। অতিরিক্ত ছোট ডিভাইসে(মোবাইল) কলামগুলো নিচে নিচে অবস্থান করবে। অর্থাৎ মোবাইল স্ক্রিনের ক্ষেত্রে প্রত্যেকটি কলাম স্বয়ংক্রিয়ভাবে ১০০% প্রস্থ নিয়ে নেবেঃ

kt_satt_skill_example_id=1221

নোটঃ এটা নিশ্চিত করুন যে কলামের যোগফল ১২টি যৌক্তিক কলামের বেশি নয়।
২৫%/৭৫% অনুপাতে কলামের জন্য .col-sm-3 এবং .col-sm-9 ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=1223

মিডিয়াম ডিভাইসের জন্য কিভাবে ভিন্ন অনুপাতের কলাম তৈরি করা যায় তা পরবর্তী অধ্যায়ে দেখানো হয়েছে।

বুটস্ট্রাপ গ্রীড উদাহরণ: মিডিয়াম ডিভাইস(সাধারণ ডেক্সটপ/ল্যাপটপ)

বুটস্ট্রাপ গ্রীড: পূর্ববর্তী অধ্যায়ে আমরা ছোট ডিভাইসের জন্য গ্রীড উদাহরণ দেখিয়েছি। 50%/50 অনুপাতে ভাগ করার জন্য আমরা দুটি div ব্যবহার করেছি:

kt_satt_skill_example_id=1254

মিডিয়াম ডিভাইসে হয়তো ডিজাইনটি 33.3%/66.6% অনুপাতে ভাল হবে।

টিপস: ছোট ডিভাইস বলতে ৯৯২ পিক্সেল থেকে ১১৯৯ পিক্সেল রেজুলেশনের স্ক্রিনযুক্ত ডিভাইসকে বুঝায়।

মিডিয়াম ডিভাইসের জন্য আমরা .col-md-* ক্লাস ব্যবহার করবো।

এখন আমরা মিডিয়াম ডিভাইসের জন্য কলাম প্রস্থ যুক্ত করবো:

kt_satt_skill_example_id=1255

এক্ষেত্রে ছোট ডিভাইসের জন্য col-sm-* ক্লাস গুলো কাজ করবে এবং মিডিয়াম ডিভাইসের জন্য col-md-* ক্লাস কাজ করবে।

এই উদাহরণে আমরা ছোট ডিভাইসের জন্য 50%/50% এবং মিডিয়াম ডিভাইসের জন্য 33.3%/66.6% অনুপাতে কলাম তৈরি করবো। কিন্তু অতিরিক্ত ছোট (মোবাইল) ডিভাইসের ক্ষেত্রে কলামগুলো নিচে নিচে দেখাবে। কারন মোবাইল ডিভাইসের জন্য আমরা কলাম লে-আউট নির্দিষ্ট করে দেইনি:

kt_satt_skill_example_id=1256

নোটঃ এটা নিশ্চিত করুন যে কলামগুলোর যোগফল ১২ এর বেশি নয়!

শুধুমাত্র মিডিয়াম ডিভাইসের জন্য

এই উদাহরণে শুধুমাত্র .col-md-4 এবং .col-md-8 ক্লাস নির্দিষ্ট করে দিয়েছি (.col-sm-* ব্যাতীত)। এর মানে মিডিয়াম এবং বড় ডিভাইসে 50%/50% অনুপাতে কলাম তৈরি হবে কারন কলাম ক্লাসগুলো ছোট ডিভাইসের ক্লাসগুলোকে বেশি প্রাধান্য দেয়। এক্ষেত্রে ছোট দুটি ডিভাইসে কলামগুলো ভার্টিক্যাল আকারে দেখাবেঃ

kt_satt_skill_example_id=1257

বড় ডিভাইসের জন্য কিভাবে ভিন্ন অনুপাতের কলাম তৈরি করা যায় তা পরবর্তী অধ্যায়ে দেখানো হয়েছে।

বুটস্ট্রাপ গ্রীড উদাহরণঃ বড় ডিভাইস

বুটস্ট্রাপ গ্রীড: পূর্ববর্তী অধ্যায়ে আমরা ছোট ও মাঝারি ডিভাইসের জন্য ক্লাস দ্বারা একটি গ্রীড উদাহরণ তৈরি করেছিলাম। আমরা সেখানে দুইটি div (কলাম) ব্যবহার করেছি এবং তাদের ছোট ডিভাইসে 50%/50% কলামে এবং মাঝারি ডিভাইসে 33.3%/66.6% কলামে বিভক্ত করেছিঃ

kt_satt_skill_example_id=1259

কিন্তু বড় ডিভাইসের ডিজাইনের ক্ষেত্রে লে-আউটটি 25%/75% লে-আউটে বিভক্ত হলে ভাল দেখাবে।

টিপসঃ বড় ডিভাইস বলতে ১২০০ পিক্সেল বা তার বেশি রেজুলেশনের স্ক্রিন যুক্ত ডিভাইসকে বুঝায়।

বড় ডিভাইসের জন্য আমরা .col-lg-* ক্লাস ব্যবহার করবো।

সুতরাং এখন আমরা বড় ডিভাইসের জন্য কলাম প্রস্থ নির্ধারন করবোঃ

kt_satt_skill_example_id=1260

এক্ষেত্রে ছোট ডিভাইসের জন্য col-sm-* ক্লাস, মিডিয়াম ডিভাইসের জন্য col-md-* ক্লাস এবং বড় ডিভাইসের জন্য col-lg-* ক্লাস কাজ করবে।

নিম্নলিখিত উদাহরণে ছোট ডিভাইসের জন্য 50%/50% কলাম, মাঝারি ডিভাইসের জন্য 33.%/66.6% কলাম, এবং বড় ডিভাইসের 25%/75% কলাম তৈরি করা হয়েছেঃ

kt_satt_skill_example_id=1262

শুধুমাত্র বড় ডিভাইসের জন্য ব্যবহার

নিচের উদাহরণে, আমরা শুধুমাত্র .col-lg-6 ক্লাস উল্লেখ করেছি (.col-md-* এবং/অথবা .col-sm-* ছাড়া)। এর মানে হল যে বড় ডিভাইসে কলামগুলো ৫০%/৫০% অনুপাতে বিভক্ত হবে। কিন্তু, মিডিয়াম ও ছোট ডিভাইসের ক্ষেত্রে কলামগুলো নিচে নিচে অবস্থান করবে। কারন আমরা মিডিয়াম এবং ছোট ডিভাইসের জন্য কলাম লে-আউট উল্লেখ করিনিঃ

kt_satt_skill_example_id=1263

এই পেজের মধ্যে আমরা বুটস্ট্রাপ গ্রীড লে-আউটের কিছু বেসিকে উদাহরণ দেয়ার চেষ্টা করেছি।

তিনটি সমান কলামের জন্য

নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে সমান প্রস্থ বিশিষ্ট তিনটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবে। কিন্তু মোবাইল ফোনের ক্ষেত্রে কলামগুলো নিচে নিচে অবস্থান করবেঃ

kt_satt_skill_example_id=1268

তিনটি অসমান কলামের জন্য

নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে ভিন্ন প্রস্থ বিশিষ্ট তিনটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবেঃ

kt_satt_skill_example_id=1270

দুটি অসমান কলামের জন্য

নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে ভিন্ন প্রস্থ বিশিষ্ট দুইটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবেঃ

kt_satt_skill_example_id=1272

দুটি কলামের মধ্যে আরো দুটি নেস্টেড কলাম

নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে ভিন্ন প্রস্থ বিশিষ্ট দুইটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবে। দুটি কলামের মধ্যে বড় কলামটিকে আবার সমান দুই ভাগে ভাগ করা হয়েছে। মোবাইল ডিভাইসের ক্ষেত্রে সবগুলো কলামই নিচে নিচে অবস্থান করবেঃ

kt_satt_skill_example_id=1274

মিক্সডঃ মোবাইল এবং ডেস্কটপ

বুটস্ট্রাপ গ্রীড সিস্টেমে চারটি ক্লাস রয়েছে: xs(মোবাইল), sm(ট্যাবলেট), md(ডেস্কটপ) and lg(বড় ডেস্কটপ)। ডাইনামিক ও ফ্লেক্সিবল লে-আউট তৈরি করার ক্ষেত্রে ক্লাসগুলো একত্রে ব্যবহার করা যায়।

টিপস: বুটস্ট্রাপ গ্রীড সিস্টেমে ছোট ক্লাসগুলোকে বেশি প্রাধান্য দেয়া হয়েছে। আপনি যদি xs এবং sm ক্লাসে একই লে-আউট পেতে চান তাহলে শুধুমাত্র xs ক্লাস উল্লেখ করলেই হবে।

kt_satt_skill_example_id=1276

মিশ্রঃ মোবাইল, ট্যাবলেট এবং ডেস্কটপ

kt_satt_skill_example_id=1278

ফ্লোট ক্লিয়ার

নির্দিষ্ট ব্রেকপয়েন্টে অদ্ভুত wrapping প্রতিরোধ করতে ফ্লোট ক্লিয়ার করুন(.clearfix ক্লাসের মাধ্যমে):

kt_satt_skill_example_id=1279

কলাম অফসেট

কলামকে ডানদিকে সরিয়ে নেয়ার জন্য .col-*-offset-* ক্লাস ব্যবহার করুন। এটি কলামের বাম দিকের মার্জিন বৃদ্ধি(কলামের প্রস্থের সমান) করেঃ

kt_satt_skill_example_id=1280

Push এবং Pull - কলাম ক্রম পরিবর্তন

গ্রীড কলামের ক্রম পরিবর্তন করার জন্য .col-*-push-* ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=1282